<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">SSID流量和最近在线用户数</div> 
      <div class="sn-body" style="bottom: 20px"> 
        <div class="wrap-container"> 
          <div class="table">
            <div class="tr thead">
              <div class="td">站点/SSID</div>
              <div class="td">流量</div>
              <div class="td">用户数</div>
            </div>

            <vue-seamless-scroll :data="tableData" class="seamless-warp" :class-option="optionSetting_talent">
             <div class="tbody" v-for="(n , i) in tableData" :key="i">
              <div class="title">{{n.siteName}}</div>
              
              <div class="tr" v-for="(item , index) in n.ssids" :key="index + '_ZL'">
                <div class="td">{{item.ssidName}}</div>
                <div class="td">{{item.ssidTraffic}}</div>
                <div class="td">{{item.onlineUsers}}</div>
              </div>
            </div>
            </vue-seamless-scroll>

          </div>


        </div> 
      </div> 
    </div>   
  </div>
</template>



<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  name: "talent",
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      timer: null,
      tableData: []
    }
  },
  props: {
    time: {
      type: Number,
      default: 600000
    },
  },
  
  computed: {
　　optionSetting_talent () {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        // autoPlay: false,
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    }
  }, 
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/querySsidTraffic';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data;
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.chartsdom {
    width: 100%;
    height: 95%;
  }

.table {
  width: 100%;
  font-size: 12px;
  padding-left: 16px;
  box-sizing: border-box;
  height: 100%;
  color: #E2E5FF;
}
.table .thead, .table .tbody .tr{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.table .tbody .tr {
  padding: 10px 0;
  line-height: 1.5;
}
.table .tbody {
  overflow-y: auto;
  width: 100%;
}
.title {
  width: 100%;
  line-height: 3;
  font-size: 14px;
}
.table .td{
  text-align: center;
  word-break: break-word;
}

.table .tr>.td:nth-child(1){
  width: 40%;
  text-align: left;
  // text-indent:2em;
  padding-left: 4%;
  box-sizing: border-box;
}
.table .tr>.td:nth-child(2){
  width: 30%;
}
.table .tr>.td:nth-child(3){
  width: 30%;
}
 .seamless-warp {
      height: 100%;
      overflow: hidden;
      visibility: visible;
    }
</style>
